
import cTitle from "components/title";

import * as echarts from "echarts";
import html2canvas from "html2canvas";
import { Toast } from 'vant';
import { ImagePreview } from "vant";


let myChart = null
let myChart1 = null
let myChart2 = null
let myChart3 = null
let myChart4 = null
let myChart5 = null
export default {
  components: {
    cTitle
  },
  data() {
    return {
      tabInd: 0,
      selecttime: false,
      order_count:"0",
      price_sum:"0",
      area: [],
      selecAareaname:"",//省份
      selecAareanameId:"",//省份
      areaid:"",
      areaname:"",//省份
      areaInd:-1,
      money:"0",
      orders:"0",
      reward:"0",
      agencyInfo:[],
      optionsChart: {
        color: ['#377eef'],
        tooltip: {
          trigger: 'axis',
          triggerOn: 'click', //点击才会出现提示框
          backgroundColor: 'rgba(76, 151, 251,1)', // 背景颜色
          borderWidth: 0,
          axisPointer: {
            type: 'none'
          },
          textStyle: { // 文本样式
            color: '#fff', // 文本颜色
            fontSize: 14 // 文本大小
          },
          formatter: function (params) {
            // 只返回 x 轴的值
            return params[0].data;
          },
          confine: true,
          // position: function (point, params, dom, rect, size) {
          //     // point 是 [x, y] 格式
          //     // 可以自定义位置返回，例如：
          //     return [point[0] + 10, point[1] - 30]; // 在默认位置的基础上偏移
          // }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '0%',
          top: '5%',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          boundaryGap: false,
          data: [],
          axisTick: {
            show: true
          },
          axisLine: {
            show: false // 显示轴线
          },
        }],
        yAxis: [{
          type: 'value',
          axisLabel: {
            interval: 6 // 设置为6，表示只显示6个标签
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false // 显示轴线
          },
        }],
        series: [{
          name: '',
          type: 'line',
          stack: 'Total',
          smooth: true,
          lineStyle: {
            width: 2
          },
          showSymbol: false,
          areaStyle: {
            opacity: 0.8,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: 'rgb(51, 123, 237)'
            },
            {
              offset: 1,
              color: 'rgb(255, 255, 255)'
            }
            ])
          },
          emphasis: {
            focus: 'series'
          },
          data: []
        }]
      },
      optionsChartArr:[],
      image:""
    };
  },

  mounted() {
    $http.post("Baoxian.basicData").then(res=>{
      if(res.result== 1){
        this.order_count = res.data.order_count
        this.price_sum = res.data.price_sum
        this.$nextTick(()=>{
          this.optionsChart.xAxis[0].data = res.data.chart_data.map(item=>item.date)
          this.optionsChart.series[0].data = res.data.chart_data.map(item=>item.complete)
          this.chartInit()
        })
      }
    })
  },

  created() {
    $http.post("Baoxian.getProvince").then(res=>{
      if(res.result== 1){
        this.area = res.data
        this.areaname = res.data[0].areaname
        this.selecAareaname = res.data[0].areaname
        this.selecAareanameId = res.data[0].id
        this.areaid = res.data[0].id
        this.getProvinceInfo(res.data[0].id)
        this.getManpower(res.data[0].id)

      }
    })
  },

  methods: {
    chartInit() {
      var _this = this
      myChart = echarts.init(this.$refs.echartId)
      console.log(this.optionsChart);
      myChart.setOption(_this.optionsChart)
      
    },
    selectTab(e,type) {
      var _this = this
      if (this.tabInd == e) return
      this.tabInd = e
      if(type == 'per'){
        this.$nextTick(()=>{
          myChart1 = echarts.init(this.$refs.echartId1)
          myChart1.setOption(_this.optionsChartArr[0].options)
          myChart2 = echarts.init(this.$refs.echartId2)
          myChart2.setOption(_this.optionsChartArr[1].options)
          myChart3 = echarts.init(this.$refs.echartId3)
          myChart3.setOption(_this.optionsChartArr[2].options)
          myChart4 = echarts.init(this.$refs.echartId4)
          myChart4.setOption(_this.optionsChartArr[3].options)
          myChart5 = echarts.init(this.$refs.echartId5)
          myChart5.setOption(_this.optionsChartArr[4].options)
        })
      }
    },
    // 选择省
    selectDay(ind,e) {
      this.areaname = e.areaname
      this.areaid = e.id
    },
    // 选择省
    selectdayshow(e) {
      this.selecttime = !this.selecttime
      if(e == "y"){
        this.selecAareaname = this.areaname
        this.selecAareanameId = this.areaid
        this.getProvinceInfo(this.selecAareanameId)
        this.getManpower(this.selecAareanameId)
      }else{
        this.areaname = this.selecAareaname
        this.areaid = this.selecAareanameId
      }
      
    },
    // 省份数据
    getProvinceInfo(e){
      $http.post("Baoxian.provinceInfo",{
        province:e
      }).then(res=>{
        if(res.result== 1){
          this.money = this.convert(res.data.statistics.money)
          this.orders = this.convert(res.data.statistics.orders)
          this.reward = this.convert(res.data.statistics.reward)
          this.agencyInfo = []
          for (const key in res.data.agencyInfo) {
            if (Object.hasOwnProperty.call(res.data.agencyInfo, key)) {
              const element = res.data.agencyInfo[key];
              this.agencyInfo.push({
                level_name:element.level_name,
                money:this.convert(element.money),
                orders:this.convert(element.orders),
                reward:this.convert(element.reward)
              })
            }
          }
        //  console.log(res);
        }
      })
    },
    // 人力数据
    getManpower(e){
      $http.post("Baoxian.manpower",{
        province:e
      }).then(res=>{
        if(res.result== 1){
          this.optionsChartArr = []
          for (const key in res.data) {
            if (Object.hasOwnProperty.call(res.data, key)) {
              const element = res.data[key];
              let o = JSON.parse(JSON.stringify(this.optionsChart))
              o.tooltip.formatter = function (params) {
                // 只返回 x 轴的值
                return params[0].data;
              },
              o.xAxis[0].data = element.map(item=>item.date)
              o.series[0].data = element.map(item=>item.complete)
              let data = {
                name:key,
                options:o
              }
              this.optionsChartArr.push(data)
            }
          }
          // console.log(this.optionsChartArr);
        //  console.log(res);
        }
      })
    },
    convert(num){
      if(num > 0){
        let n = num.split(".")[0]
        if(n.length>4){
          let w = String(n).substring(0,3)
          return w + "万"
        }else{
          return num
        }
      }else{
        return num
      }
     
    },
    hideToop(e){
      if(e == '1')return
      myChart.dispatchAction({
        type: 'hideTip'
      })
      if(this.tabInd == 0)return
      if(e == '2')return
      myChart1.dispatchAction({
        type: 'hideTip'
      })
      if(e == '3')return

      myChart2.dispatchAction({
        type: 'hideTip'
      })
      if(e == '4')return
      myChart3.dispatchAction({
        type: 'hideTip'
      })
      if(e == '5')return
      myChart4.dispatchAction({
        type: 'hideTip'
      })
      if(e == '6')return
      myChart5.dispatchAction({
        type: 'hideTip'
      })
    },
    createImage(){
      Toast.loading({
        duration:0,
        message: '生成中...',
        forbidClick: true,
        overlay:true
      })
      let ele = document.getElementsByClassName("content")[this.tabInd]
      let h = document.getElementsByClassName("header")[0].clientHeight
      let t = document.getElementsByClassName("tabarr")[0].clientHeight
      html2canvas(ele,{
        height:ele.clientHeight + 20,
        y:h+t - 20,
      }).then(canvas=>{
        let dataURL = canvas.toDataURL("image/png");
        // console.log(dataURL);
        ImagePreview({ images: [dataURL] });
        Toast.clear()
      })
    }
  }
};